'use strict'

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')

const htmlMinify = {
    collapseWhitespace: true,
    removeComments: true,
    removeRedundantAttributes: true,
    removeScriptTypeAttributes: true,
    removeStyleLinkTypeAttributes: true,
    useShortDoctype: true
}

module.exports = {
    entry: {
        'index': './src/index.js',
        'login/login': './src/login/login.js',
        'page/page': './src/page/page.js',
    },
    output: {
        filename: '[name].[chunkHash].js',
        path: path.resolve(__dirname, 'dist'),
        chunkFilename: "[name].[chunkhash].js"
    },
    mode: 'development',
    // mode: 'production',
    devtool: 'source-map',
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new HtmlWebpackPlugin({
            chunks: ['static/css/style', 'static/js/jqxt', 'static/js/common', 'index'],
            template: './src/index.html',
            minify: htmlMinify
        }),
        new HtmlWebpackPlugin({
            filename: 'login/index.html',
            chunks: ['static/css/style', 'login/login'],
            template: './src/login/login.html',
            minify: htmlMinify
        }),
        new HtmlWebpackPlugin({
            filename: 'page/a.1.html',
            chunks: ['static/js/jqxt', 'page/page'],
            template: './src/page/a.1.html',
            minify: htmlMinify
        }),
        new HtmlWebpackPlugin({
            filename: 'page/a.html',
            chunks: ['static/js/jqxt', 'page/page'],
            template: './src/page/a.html',
            minify: htmlMinify
        }),
        new HtmlWebpackPlugin({
            filename: 'page/b.html',
            chunks: ['static/js/jqxt', 'page/page'],
            template: './src/page/b.html',
            minify: htmlMinify
        }),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash].css'
        }),
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.css$/g,       //一个正则表达式，指示应优化/最小化的资产的名称。提供的正则表达式针对配置中ExtractTextPlugin实例导出的文件的文件名运行，而不是源CSS文件的文件名。默认为/\.css$/g
            cssProcessor: require('cssnano'), //用于优化\最小化CSS的CSS处理器，默认为cssnano
            cssProcessorOptions: {
                safe: true,
                discardComments: {
                    removeAll: true
                },
                map: {
                    // 不生成内联映射,这样配置就会生成一个source-map文件
                    inline: false,
                    // 向css文件添加source-map路径注释
                    // 如果没有此项压缩后的css会去除source-map路径注释
                    annotation: true
                }
            }, //传递给cssProcessor的选项，默认为{}
            canPrint: true                    //一个布尔值，指示插件是否可以将消息打印到控制台，默认为true
        }),
    ],
    optimization: {
        splitChunks: {
            cacheGroups: {
                style: {
                    name: 'static/css/style',
                    test: /style\.css$/,
                    chunks: 'initial',
                    enforce: true,
                },
                jqxt: {
                    name: 'static/js/jqxt',
                    test: /jqxt\/*\.js$/,
                    chunks: "initial",
                    enforce: true,
                },
                common: {
                    name: 'static/js/common',
                    test: /node_modules/,
                    chunks: "initial",
                    enforce: true,
                }
            }
        },
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader',
                    }
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'url-loader',
                    }
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
};